<template>
	<view class="content">

		<!-- 发货人部分 -->
		<view class="item_div">

			<view class="item_sub_div">
				<view class="item_sub_txt">领用人</view>
				<input class="et_sub_txt" placeholder="请输入姓名" maxlength="24" @input="onInputSenderName" :value="fill_uname" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">领用说明</view>
			</view>

			<view class="item_sub_div">
				<view class="item_sub_txt" style="display: none;">详细地址</view>
				<textarea class="et_sub_txt" style="width: 100%;;" placeholder="请输入说明" @input="onInputRemark" :value="remark" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 货物信息 交货/配送方式  -->
		<view class="item_div">

			<view v-for="(item,index) in goods_list">
				<view class="item_sub_div" @click.stop="onSelGoods(index)">
					<view class="item_sub_txt" style="text-decoration: underline;color: #0E73B6;">{{index + 1}}.</view>
					<text class="item_txt" style="font-weight: bold;" maxlength="99"> {{item.name || '点击选择物品'}} > </text>
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view class="item_sub_div">
					<view class="item_sub_txt">领用数量</view>
					<view style="display: flex;align-items: center;">
						<view class="btn_plus_min" @click="onNumMin(index)"> - </view>
						<input class="et_take_num" type="digit" maxlength="3" @input="onInputGoodsNum($event,item,index)" :value="item.count" />
						<view class="btn_plus_min" @click="onNumPlus(index)"> + </view>
					</view>
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view class="item_sub_div">
					<view class="item_sub_txt">物品单位</view>
					<text class="item_txt" maxlength="99">{{item.unit}}</text>
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view style="width: 100%;display: flex;;justify-content: flex-end;">
					<view class="del_goods" @click="onDelGoods(index)">删除</view>
				</view>

			</view>

		</view>

		<view class="add_goods" @click.stop="onAddGoods">
			+添加物品
		</view>

		<!-- 确定 -->
		<view class="btn_ok" @click="onOk">提交</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="true">
				<view class="pop_div">
					<view class="pop_div_1">
						<view style="padding: 0 16rpx 0 16rpx;font-weight: normal;color: #666;" @click="onClosePop(0)">关闭</view>
						<view>选择地区</view>
						<view style="padding: 0 16rpx 0 16rpx;font-weight: normal;" @click="onClosePop(1)">确定</view>
					</view>

					<view class="pop_div_2">
						<picker-view :value="value" style="width: 100vw;height: 100%;" @change="onPickerChange">
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_pro_list">{{curr_pro_list[index].label}}</view>
							</picker-view-column>
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_city_list">{{curr_city_list[index].label}}</view>
							</picker-view-column>
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_area_list">{{curr_area_list[index].label}}</view>
							</picker-view-column>
						</picker-view>
					</view>

				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { getUInfo, } from '@/util/util.js'
	export default {
		data() {
			return {

				value: [14, 11, 0], // 地区索引
				curr_pro_list: [],
				curr_city_list: [],
				curr_area_list: [],

				// 记录操作的物品下标
				goods_index: 0,
				// 物品列表
				goods_list: [{ count: 1 }],

				fill_uname: '', // 领用人
				remark: '', // 说明
			}
		},

		onLoad(opts) {
			console.log('curr.ver = ', '202508281539');
			// 选择物品
			uni.$on('onSelGoods', (data) => {
				// console.log('监听到onSelGoods，参数=' + JSON.stringify(data));
				try {
					data.msg.count = 1
					// this.goods_list[this.goods_index] = data.msg
					// this.goods_list.splice(this.goods_index, 1, data.msg)
					this.$set(this.goods_list, this.goods_index, data.msg)
				} catch (e) {
					console.log('接收选择的物品发生错误.e = ', e);
				}
			})
		},

		methods: {

			// 数量增加
			onNumPlus(index) {
				if (this.goods_list[index].count >= 999) {
					uni.showToast({ icon: 'none', title: '已达到上限' })
					return
				}
				++this.goods_list[index].count
				this.$forceUpdate()
			},
			// 数量减少
			onNumMin(index) {
				if (this.goods_list[index].count <= 1) {
					uni.showToast({ icon: 'none', title: '不能再减了' })
					return
				}
				// this.$set(this.goods_list[index], 'count', --this.goods_list[index].count)
				--this.goods_list[index].count
				this.$forceUpdate()
			},
			// 添加物品
			onAddGoods() {
				if (this.goods_list && this.goods_list.length >= 10) {
					uni.showToast({ icon: 'none', title: '已达到货物上限' })
					return
				}
				this.goods_list.push({ count: 1 })
			},
			// 删除物品
			onDelGoods(index) {
				let that = this
				if (this.goods_list && this.goods_list.length > 1) {
					if (this.goods_list[index].name) {
						// 删除的条目没有物品信息 需要弹窗确认
						uni.showModal({
							// 
							content: `确认删除『${that.goods_list[index].name}』？ `,
							success: (res) => {
								res.confirm && that.goods_list.splice(index, 1)
							}
						})
					} else {
						// 删除的条目没有物品信息 直接删除
						that.goods_list.splice(index, 1)
					}
				} else {
					uni.showToast({ icon: 'none', title: '就剩1个,不能再删了' })
				}
			},

			// 选择物品
			onSelGoods(index) {
				this.goods_index = index
				uni.navigateTo({ url: '/pages/ext/oa/sel_goods' })
			},
			// 输入备注
			onInputRemark(e) {
				this.remark = e.detail.value
			},
			// 输入领用人姓名
			onInputSenderName(e) {
				this.fill_uname = e.detail.value
			},
			// 输入数量
			onInputGoodsNum(e, item, index) {
				let val = e.detail.value
				if (val && parseFloat(val) >= 999) {
					val = 999
					uni.showToast({ icon: 'none', title: '最大为『999』' })
				}
				this.goods_list[index].count = val
				this.$forceUpdate()
			},

			// 确定
			onOk() {
				let that = this

				if (!this.goods_list || this.goods_list.length <= 0) {
					uni.showToast({ icon: 'none', title: '请选择物品' })
					return
				}
				if (this.goods_list.length == 1 && !this.goods_list[0].num) {
					uni.showToast({ icon: 'none', title: '请选择物品' })
					return
				}

				let goods_res = true
				this.goods_list.map((item, index) => {
					if (item.name && !item.count) {
						uni.showToast({ icon: 'none', title: `『${item.name}』未填写数量` })
						goods_res = false
					}
				})
				if (!goods_res) return

				// 处理物品列表(提出不合规的数据)
				let newList = []
				this.goods_list.map((item, index) => {
					if (item.name && item.count) {
						// 物品数据合规
						newList.push({ aid: item.aid, count: item.count })
					}
				})

				let newObj = {
					openkey: '513fb82e1e54251bb2c0bf95786d136a',
					m: 'openApiGoodsRequisition',
					a: 'saveGoodsRequisition',
					fill_uname: this.fill_uname,
					explain: this.remark,
					goodsList: JSON.stringify(newList),
				}
				console.log('准备提交的数据 = ', newObj);
				uni.showModal({ title: '提示', content: '确认提交？', success: (res) => { res.confirm && that.postData(newObj) } })
			},

			// 接口:提交数据
			async postData(newObj) {
				let that = this
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$postGoodsList({ ...newObj })
				if (res.code == 200) {
					that.resetData()
					uni.showModal({
						title: '提示',
						content: `${res.msg}`,
						confirmText: '退出',
						confirmColor: '#000000',
						cancelText: '继续领用',
						cancelColor: '#0E73B6',
						success: (res) => {
							if (res.confirm) {
								// uni.showModal({ title: '提示', content: '领用完成请自行退出当前页面。', showCancel: false })
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 重置数据
			resetData() {
				this.remark = ''
				this.goods_list = [{ count: 1 }]
				this.$forceUpdate()
			},

			// picker改变
			onPickerChange(e) {
				this.value = e.detail.value
			},
			// 打开popup
			onOpenPop(flag) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			onClosePop(flag) {
				this.$refs.popup.close()
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.item_txt {
		font-size: 28rpx;
		/* margin: 12rpx 0 0 0; */
	}

	.item_sub_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		margin: 10rpx 0 0 0;
		/* background-color: red; */
	}

	.item_sub_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 0rpx 0 0 0rpx;
	}

	.et_sub_txt {
		width: 60%;
		height: 100%;
		text-align: right;
		font-size: 28rpx;
		/* background-color: red; */
	}

	.et_take_num {
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #f0f0f0;
	}

	.btn_plus_min {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #f0f0f0;
		margin: 0 6rpx 0 6rpx;
	}

	.del_goods {
		padding: 36rpx 0rpx 36rpx 24rpx;
		color: orangered;
		font-weight: bold;
		font-size: 28rpx;
	}

	.add_goods {
		align-self: center;
		padding: 18rpx 12rpx 12rpx 12rpx;
		font-weight: bold;
	}

	.btn_ok {
		align-self: center;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		color: white;
		background: #0E73B6;
		border-radius: 16rpx;
		margin: 36rpx 0 36rpx 0;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		height: 34vh;
		background-color: white;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.pop_div_1 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}
</style>